<template>
  <div class="index_container">
    <!-- 搜索 -->
    <van-search v-model="search_value" shape="round" background="#fff" placeholder="请输入搜索关键词" />

    <!-- 轮播图 -->
    <van-swipe>
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 5宫格 -->
    <van-grid :border="false" :column-num="5">
      <van-grid-item>
        <van-image
          src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"
        />
        <p>天猫新品</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1"
        />
        <p>今日爆款</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://gw.alicdn.com/tfs/TB19uWKXkCy2eVjSZPfXXbdgpXa-183-144.png?getAvatar=1"
        />
        <p>天猫国际</p>
      </van-grid-item>

      <van-grid-item>
        <van-image
          src="https://gw.alicdn.com/tfs/TB1FucwVwHqK1RjSZFgXXa7JXXa-183-144.png?getAvatar=1"
        />
        <p>天猫超市</p>
      </van-grid-item>
      <van-grid-item>
        <van-image
          src="https://gw.alicdn.com/tfs/TB19yZJVBLoK1RjSZFuXXXn0XXa-183-144.png?getAvatar=1"
        />
        <p>金币庄园</p>
      </van-grid-item>
    </van-grid>

    <!-- 活动页 -->
    <div class="index_active">
      <div class="active_item">
        <div class="title">淘抢购</div>
        <div class="box_wrap">
          <div class="item_wrap">
            <img
              src="https://gw.alicdn.com/bao/upload/i1/O1CN01i5PmgE1MpiNLcCGXY_!!0-juitemmedia.jpg"
            />
            <h2>230件已售</h2>
            <p>¥13.8</p>
          </div>
          <div class="item_wrap">
            <img
              src="https://gw.alicdn.com/bao/upload/i4/O1CN01Jkm5Q51nQ3odA3KYn_!!0-juitemmedia.jpg"
            />
            <h2>230件已售</h2>
            <p>¥48</p>
          </div>
        </div>
      </div>
      <div class="active_item">
        <div class="title">淘抢购</div>
        <div class="box_wrap">
          <div class="item_wrap">
            <img
              src="https://gw.alicdn.com/bao/upload/i1/O1CN01i5PmgE1MpiNLcCGXY_!!0-juitemmedia.jpg"
            />
            <h2>230件已售</h2>
            <p>¥13.8</p>
          </div>
          <div class="item_wrap">
            <img
              src="https://gw.alicdn.com/bao/upload/i4/O1CN01Jkm5Q51nQ3odA3KYn_!!0-juitemmedia.jpg"
            />
            <h2>230件已售</h2>
            <p>¥48</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 首页小tab -->
    <div class="tab_wrap" ref="wrapper">
      <div class="index_goods">
        <div class="good_item" v-for="item in goodlist" :key="item.id">
          <div class="img_box">
            <img
              src="https://gw.alicdn.com/bao/uploaded/i2/24697173/O1CN017jZAAn22rHUtGZUKc_!!0-item_pic.jpg_500x500q90.jpg_.webp"
            />
          </div>
          <div class="info">
            <h2 class="van-multi-ellipsis--l2">{{item.id}}日本进口正品 inomata超薄抗菌树脂软切菜板塑料分类水果砧板</h2>
            <div class="price_number">
              <span class="icont">￥</span>
              <span class="number">9.9</span>
              <span class="person">19人已购买</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 监听滚动事件
import BScroll from "better-scroll";
export default {
  data() {
    return {
      // 轮播
      images: [
        "https://gw.alicdn.com/imgextra/i4/56/O1CN01Rfbxzj1CHgnHS5tRF_!!56-0-lubanu.jpg",
        "https://aecpm.alicdn.com/simba/img/TB15tIjGVXXXXcoapXXSutbFXXX.jpg",
        "https://img.alicdn.com/imgextra/i4/12/O1CN017kHQYc1BxXMsGfQJB_!!12-0-luban.jpg",
      ],
      // 搜索内容
      search_value: "",
      // 小tab
      activeName: 1,
      // 商品内容
      goodlist: [
        { id: 1, title: "大家好啊" },
        { id: 2, title: "大家好啊" },
        { id: 3, title: "大家好啊" },
        { id: 4, title: "大家好啊" },
        { id: 5, title: "大家好啊" },
        { id: 6, title: "大家好啊" },
        { id: 7, title: "大家好啊" },
        { id: 8, title: "大家好啊" },
      ],
    };
  },
  methods: {},
  mounted() {
    this.myScroll = new BScroll(this.$refs.wrapper, {
      scrollY: true,
      pullUpLoad: {
        threshold: 50,
      },
    });

    // this.myScroll.on("pullingUp", () => {
    //   this.$nextTick(() => {
    //     this.myScroll.refresh(); // DOM 结构发生变化后，重新初始化BScroll
    //   });
    //   console.log("走代码");
    //   this.myScroll.finishPullUp(); // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
    // });

    this.myScroll.on("scrollEnd", () => {
      // 滚动到底部
      if (this.myScroll.y <= this.myScroll.maxScrollY + 50) {
        console.log("触底");
        this.goodlist.push( { id: 9, title: "大家好啊" })
        this.$emit("scrollToEnd");
      }
    });
  },
};
</script>

<style lang="scss"  scoped>
.index_container {
  background: #f0f0f0;
  padding-bottom: 20px;
}
// 轮播
/deep/ .van-swipe {
  height: calc(100vw * 352 / 1125);
}
/deep/ .van-swipe img {
  width: 100%;
}
// 活动
.index_active {
  width: 96%;
  margin: 40px auto;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  @include flexA();
  .active_item {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;

    .title {
      font-size: 34px;
      font-weight: bold;
    }

    .box_wrap {
      @include flexA();
      .item_wrap {
        width: 48%;
        text-align: center;
        img {
          width: 100%;
        }

        h2 {
          display: inline-block;
          color: #ff0031;
          font-size: 14px;
          padding: 4px 10px;
          border-radius: 10px;
          background: #ffefef;
        }

        p {
          padding-top: 6px;
          font-size: 30px;
          color: #ff0031;
        }
      }
    }
  }
}

// 商品
.tab_wrap {
  overflow: hidden;
  height: 958px;
}
.index_goods {
  width: 98%;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .good_item {
    width: 48%;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    @include flexA(column);
    .img_box {
      width: 100%;
      img {
        width: 100%;
      }
    }

    .info {
      h2 {
        font-size: 24px;
        font-weight: normal;
      }

      .price_number {
        padding-top: 10px;
        @include flexA(row, flex-start);
        span.icont {
          color: #ff5500;
          font-size: 24px;
        }

        span.number {
          color: #ff5500;
          font-size: 34px;
          margin-right: 10px;
        }

        span.person {
          font-size: 25px;
          color: #333;
        }
      }
    }
  }
}
</style>